import React from 'react';
import { Upload ,Button,notification} from 'antd';
import { UploadOutlined ,DeleteOutlined,DownloadOutlined} from '@ant-design/icons';
import http from 'axios'
import OSS from 'ali-oss'
import '../index.scss'

class App extends React.Component {
  state = {
    fileList: this.props.srtUrl?[{url:this.props.srtUrl,status: 'done'}]:[],
    disabled:this.props.disabled
  };

  componentWillReceiveProps(nextProps){
    let self = this;
    self.setState({
      disabled:nextProps.disabled
    })
    self.setState({ fileList:nextProps.value?[{url:nextProps.value,status: 'done'}]:[] });
    }


  handleChange = ({ fileList }) => {
    this.setState({ fileList:fileList.filter(i=>i.status==='done') });
  }

  handleMove = (file) =>{
    this.setState({
      fileList:[...this.state.fileList].filter(i=>i.status==='done')
    })
  }

  customRequest = (file) => {
    var suffix = file.file.name.substr(file.file.name.indexOf('.')) // 获取文件后缀名
    var filename = new Date().getTime() + suffix // 为文件命名

    const token =  window.location.href.indexOf('/prd') === -1 ?localStorage.getItem('token-llx-test'):localStorage.getItem('token-llx')

    http({
      method: 'post',
      url:  window.location.href.indexOf('/prd')===-1?'http://139.224.81.105:19999/qia-cloud-filesystem/OSS/companies/getStsToken':'http://139.224.81.105:9999/qia-cloud-filesystem/OSS/companies/getStsToken',
      headers: { 'Authorization':'Bearer ' + token }
    }).then(res => {
      const fileData = res
      var bucket = 'middle-file'
      var region = 'oss-cn-shanghai'
      var type = ''
      const client = new OSS({
        region,
        accessKeyId: fileData.accessKeyId,
        accessKeySecret: fileData.accessKeySecret,
        stsToken: fileData.stsToken,
        bucket
      })
      type = 'srt'
      client.multipartUpload(type + '/' + filename, file.file).then((result) => {
        var url = result.res.requestUrls[0]
        var length = url.lastIndexOf('?')
        var getUrl = length > 0 ? url.substr(0, length) : url // 文件最终路径


        this.setState({
          fileList:[...this.state.fileList,{url:getUrl,status: 'done'}].filter(i=>i.status==='done')
        })
        this.props.setSrt(getUrl)

      }).catch(function(err) {
        notification.error({
          description:'上传失败',
          duration:1
        })
      })
   }).catch(err=>{
    notification.error({
      description:'上传失败',
      duration:1
    })
  })
  }
  
    // 删除
    removeSrt = () => {
      this.setState({
        fileList:[]
      },()=>{
        this.props.setSrt('')
      })
    }
    // 下载
    downloadSrt = () => {
      window.open(this.state.fileList[0].url)
    }
    
  
    render() {
      const { fileList , disabled } = this.state;

    return (
      <div className='audio-upload'>
        <Upload
          name='file'
          action="#"
          accept=".srt"
          fileList={fileList}
          onChange={this.handleChange}
          onRemove={this.handleMove}
          customRequest={this.customRequest}
          maxCount={1}
          showUploadList={false}
        >
          <Button disabled={disabled} type='primary' icon={<UploadOutlined />}>上传字幕</Button>
        </Upload>

        {
          fileList.length===1?<div>

          
           <DownloadOutlined className='icon' onClick={this.downloadSrt}/>

           {
             !disabled?<DeleteOutlined  className='icon' onClick={this.removeSrt}/>:''
           }

         
          </div>:''
        }
      </div>
    );
  }
}

export default App;